<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    const option = {
       grid:{  
         y2:0
        },
       tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
       },
         color:[  "#228ffe","#FF576E","#3DF1B2","#47A1FF","#9A66E4","#ed3f14"],
      xAxis: {
        type: 'category',
        data: ['省级', '嘉峪关市', '金昌市', '白银市','天水市', '武威市', '张掖市', '平凉市','酒泉市', '庆阳市', '定西市', '陇南市','临夏州','甘南州'],
          axisLabel: {
               textStyle: {
                    color:"#657ca8",
              },
             

               formatter:function(val){
                        return val.split("").join("\n");
                     }
          },
          axisLine:{//x轴、y轴的深色轴线，如图2
              show: true,
              lineStyle:{
                   color:"#657ca8",
              }
          },
          axisTick: {
              show: false
          }
          
    },
    yAxis: [{
        type: 'value',
        name:"次数（次）",
         axisTick: {
              show: false
          },
         axisLine:{//x轴、y轴的深色轴线，如图2
              show: true,
              lineStyle:{
                    color:"#657ca8",                    
              }
            },
            splitLine: {
            show: true,
            lineStyle: {
                  color:"rgba(96,118,162,0.1)", 
                  type: 'solid'
            }
           },
           axisLabel: {
                   textStyle: {
                       color: '#657ca8',
                   }
               },
    },{
      type: 'value',
        name:"公里数（次）",
         axisTick: {
              show: false
          },
         axisLine:{//x轴、y轴的深色轴线，如图2
              show: true,
              lineStyle:{
                    color:"#657ca8",                    
              }
            },
            splitLine: {
            show: true,
            lineStyle: {
                  color:"rgba(96,118,162,0.1)", 
                  type: 'solid'
            }
           },
           axisLabel: {
                   textStyle: {
                       color: '#657ca8',
                   }
               },
    }],
    series: [{
        data: [120, 132, 101, 134, 90, 230, 210,120,230,412,452,123,142,146],
        type: 'line'
    }]





      // tooltip: {
      //   trigger: 'axis',
      //   axisPointer: {
      //     type: 'cross',
      //     label: {
      //       backgroundColor: '#6a7985'
      //     }
      //   }
      // },
      // grid: {
      //   top: '3%',
      //   left: '0',
      //   right: '2%',
      //   bottom: '3%',
      //   show:true,
      //   containLabel: true,
      //     y2:90,
      //     x2:10
      // },
      // xAxis: [
      //   {
      //       name: '出行次数(公里数)',
      //     type: 'category',
      //     boundaryGap: false,
      //     data: ['省级', '嘉峪关市', '金昌市', '白银市','天水市', '武威市', '张掖市', '平凉市','酒泉市', '庆阳市', '定西市', '陇南市','临夏州','甘南州'],
      //     axisLabel: {
      //          textStyle: {
      //              color: '#333',
      //         },
      //          formatter:function(val){
      //                   return val.split("").join("\n");
      //                }
      //     },
      //   }
      // ],
      // yAxis: [
      //   {
      //    show:true,  
      //     // type: 'value',
      //      name: '出行数(次)'
      //   }
      // ],
      // series: [
      //   {
      //     name: '出行次数(公里数)',
      //     type: 'line',
      //     stack: '出行数',
      //     // areaStyle: {normal: {
      //     //   color: '#2d8cf0'
      //     // }},
      //     itemStyle : {  
      //          normal : {  
      //                      color:'#3195FE',  
      //                      lineStyle:{  
      //                                   color:'#3195FE'  
      //                      }  
      //                    }  
      //               }, 
      //     data: [120, 132, 101, 134, 90, 230, 210,120,230,412,452,123,142,146]
      //   },
      // ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize())
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize())
  }
}
</script>
